<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>风险定位-报告</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/riskOrientation.css" />
    <link rel="stylesheet" href="lib/font-awesome-4.7.0/css/font-awesome.css" />
  </head>
  <body>
    <header class="header">
      <div class="sell"></div>
      <div class="top">
        <div class="inner">
          <img class="img" src="images/logo.png" alt="" />
          <label for="">
            <input type="text" />
            <a href="#"><img src="images/so1.png" alt=""/></a>
          </label>
          <div class="user">
            <img src="images/user.jpg" alt="" />
          </div>
          <div class="tel">
            <p>呼叫律师团<span>01-14725836</span></p>
          </div>
        </div>
        <div class="wrap">
          <div
            class="wnav"
            style="width:1200px;height:30px;margin:0 auto;position:relative"
          >
            <div class="nav">
              <ul class="href">
                <li class=""><a href="">首页</a></li>
                <li><a href="">企业服务</a></li>
                <li><a href="">云小律</a></li>
                <li><a href="">云律通媒体</a></li>
                <li><a href="">法律助手</a></li>
                <li><a href="">控制中心</a></li>
              </ul>
            </div>
          </div>
          <ol class="s_nav">
            <li class="qyfw">
              <ol class="one">
                <li>
                  <a href="#"
                    ><img src="images/qyfw1.png" alt="" />
                    <p>合同起草</p></a
                  >
                </li>
                <li>
                  <a href="#"
                    ><img src="images/qyfw2.png" alt="" />
                    <p>智能文书生成</p></a
                  >
                </li>
                <li>
                  <a href="#"
                    ><img src="images/qyfw3.png" alt="" />
                    <p>合同审查</p></a
                  >
                </li>
                <li>
                  <a href="#"
                    ><img src="images/qyfw4.png" alt="" />
                    <p>律师函</p></a
                  >
                </li>
                <li>
                  <a href="#"
                    ><img src="images/qyfw5.png" alt="" />
                    <p>诉讼仲裁</p></a
                  >
                </li>
                <li>
                  <a href="#"
                    ><img src="images/qyfw6.png" alt="" />
                    <p>在线法务管家</p></a
                  >
                </li>
              </ol>
              <ol class="two">
                <li>
                  <a href="#"
                    ><img src="images/qyfw7.png" alt="" />
                    <p>项目专项法律顾问</p></a
                  >
                </li>
                <li>
                  <a href="#"
                    ><img src="images/qyfw8.png" alt="" />
                    <p>常年法律顾问</p></a
                  >
                </li>
              </ol>
            </li>
            <li class="yxl">
              <ol class="one">
                <li>
                  <a href="#"
                    ><img src="images/yxl1.png" alt="" />
                    <p>系统通知</p></a
                  >
                </li>
                <li>
                  <a href="#"
                    ><img src="images/yxl2.png" alt="" />
                    <p>客服通知</p></a
                  >
                </li>
                <li>
                  <a href="#"
                    ><img src="images/yxl3.png" alt="" />
                    <p>在线解答</p></a
                  >
                </li>
              </ol>
            </li>
            <li class="flzs">
              <ol class="one">
                <li>
                  <a href="#"
                    ><img src="images/flzs1.png" alt="" />
                    <p>办事地点查询</p></a
                  >
                </li>
                <li>
                  <a href="#"
                    ><img src="images/flzs2.png" alt="" />
                    <p>利息查询</p></a
                  >
                </li>
                <li>
                  <a href="#"
                    ><img src="images/flzs3.png" alt="" />
                    <p>诉讼费计算</p></a
                  >
                </li>
                <li>
                  <a href="#"
                    ><img src="images/flzs4.png" alt="" />
                    <p>诉讼时效计算器</p></a
                  >
                </li>
              </ol>
            </li>
            <li class="kzzx">
              <ol class="one">
                <li>
                  <a href="#"
                    ><img src="images/kzzx1.png" alt="" />
                    <p>控制中心</p></a
                  >
                </li>
                <li>
                  <a href="#"
                    ><img src="images/kzzx2.png" alt="" />
                    <p>我的企业</p></a
                  >
                </li>
                <li>
                  <a href="#"
                    ><img src="images/kzzx3.png" alt="" />
                    <p>我的工单</p></a
                  >
                </li>
                <li>
                  <a href="#"
                    ><img src="images/kzzx4.png" alt="" />
                    <p>我的积分</p></a
                  >
                </li>
                <li>
                  <a href="#"
                    ><img src="images/kzzx5.png" alt="" />
                    <p>我的收藏</p></a
                  >
                </li>
                <li>
                  <a href="#"
                    ><img src="images/kzzx6.png" alt="" />
                    <p>账号管理</p></a
                  >
                </li>
                <li>
                  <a href="#"
                    ><img src="images/kzzx7.png" alt="" />
                    <p>帮助与反馈</p></a
                  >
                </li>
              </ol>
            </li>
          </ol>
        </div>
      </div>
      <div class="text">
        <div class="inner">
          <p>
            <span>首页</span
            >-<span>风险定位</span>-<span>劳动人事检测答题说明</span>-<span
              >风险报告</span
            >
          </p>
        </div>
      </div>
    </header>
    <div class="banner cf">
      <div class="surfacebox">
        <!-- 表盘 -->
        <div class="surface">
          <div class="bgbox">
            <div class="box box2">
              <div class="ball" id="ball" style="transition: all 1.5s"></div>
              <!-- <div class="text">前端开发博客</div> -->
            </div>
          </div>

          <!-- <div class="top"> -->
          <div class="semi-circle">
            <span id="score">
              30
            </span>
            <i>分</i>
          </div>
          <!-- </div> -->
          <div class="bottom">
            <div class="left">
              风险巨大
            </div>
            <div class="right">
              <i class="fa fa-flash"></i>
              <i class="fa fa-flash"></i>
              <i class="fa fa-flash"></i>
              <i class="fa fa-flash"></i>
              <i class="fa fa-flash"></i>
            </div>
          </div>
        </div>
        <!-- 右侧检测信息 -->
        <div class="info">
          <h2>北京电子科技有限公司</h2>
          <p>
            劳动人士深度检测结果
            <span>
              [风险巨大]
            </span>
          </p>
        </div>
      </div>
    </div>

    <div class="content">
      <div class="item">
        <h3>01. 企业存在由董事或者其他高级管理人员兼任监事的情形。</h3>
        <span>风险分析</span>
        <p>
          依据《中华人民共和国公司法》第五十-条规定，无论有限责任公司或股份有限公司，董事、高级管理人员均不得兼任监事。贵企业的情形已经违法了公司法的规定，可能受到工商行政部分的处罚，建议立即整改。
        </p>
      </div>

      <div class="item">
        <h3>01. 企业存在由董事或者其他高级管理人员兼任监事的情形。</h3>
        <span>风险分析</span>
        <p>
          依据《中华人民共和国公司法》第五十-条规定，无论有限责任公司或股份有限公司，董事、高级管理人员均不得兼任监事。贵企业的情形已经违法了公司法的规定，可能受到工商行政部分的处罚，建议立即整改。
        </p>
      </div>

      <div class="item">
        <h3>01. 企业存在由董事或者其他高级管理人员兼任监事的情形。</h3>
        <span>风险分析</span>
        <p>
          依据《中华人民共和国公司法》第五十-条规定，无论有限责任公司或股份有限公司，董事、高级管理人员均不得兼任监事。贵企业的情形已经违法了公司法的规定，可能受到工商行政部分的处罚，建议立即整改。
        </p>
      </div>
    </div>

    <!-- 付费解决按钮 -->
    <div class="btn">
      付费解决
    </div>
    <!-- 右侧咨询 -->
    <img
      class="consultation"
      src="./images/riskMonitoring/consultation.jpg"
      alt=""
    />

    <footer>
      <div class="inner" style="position: relative;">
        <img class="logo" src="images/logo_footer.png" alt="" />
        <ol>
          <li><a href="">服务支持</a></li>
          <li><a href="">付费咨询</a></li>
          <li><a href="">云小律</a></li>
        </ol>
        <a href="#" class="sm">法律声明</a>
        <p>@备案号22582522</p>
      </div>
    </footer>

    <!-- <i class="fa fa-flash" id="aaa"></i>123 -->
    <!-- <i class="fa fa-camera-retro fa-5x"></i> fa-5x -->

    <!-- 数字插件 -->
    <script src="lib/jquery-3.2.1.min.js"></script>
    <script src="lib/prefixfree.min.js"></script>
    <script src="lib/countup.js"></script>
    <script src="js/style.js"></script>
    <script>
      $(function() {
        function time() {
          var d = new Date();
          //var s = (d.getSeconds() + d.getMilliseconds()/1000) /60 * 360;
          var n = parseInt($(".main.s .top h1 span").html());
          console.log(n);
          var ss = (n / 100) * 180;
          console.log(ss);
          $("#watch .hands .s").animate({}, function() {
            //第一个花括号里面是动画内容，可以为空，但不能省去中括号
            $("#watch .hands .s").css("transform", "rotate(" + -ss + "deg)"); //在回调函数里面改变css属性来实现transform中的动画变换
          });
          // $('.shadow p').html();
        }

        time();
        var options = {
          useEasing: true,
          useGrouping: true,
          separator: ",",
          decimal: ".",
          duration: "1"
        };
      });
    </script>
    <script src="lib/circleChart.min.js"></script>
    <script>
      var options = {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: "."
      };
      var demo1 = new CountUp("11", 0, 35, 0, 0, options);
      var demo2 = new CountUp("22", 0, 42, 0, 0, options);
      var demo3 = new CountUp("33", 0, 94, 0, 0, options);
      var demo4 = new CountUp("44", 0, 58, 0, 0, options);
      var demo5 = new CountUp("55", 0, 24, 0, 0, options);
      var demo6 = new CountUp("66", 0, 12, 0, 0, options);

      // 滚动条距离顶部的距离 大于 200px时

      $(".circleChart#2").circleChart({
        size: 150,
        startAngle: 50,
        animate: true,
        color: "#2ad1e8",
        widthRatio: 0.3,
        textCenter: false,
        speed: 1000
        // onDraw: function(el, circle) {
        //     circle.text(Math.round(circle.value));
        // }
      });
      $(".circleChart#3").circleChart({
        size: 150,
        startAngle: 50,
        animate: true,
        color: "#ffa751",
        widthRatio: 0.3,
        textCenter: false,
        speed: 1000
      });
      $(".circleChart#4").circleChart({
        size: 150,
        startAngle: 0,
        animate: true,
        color: "#ee5764",
        widthRatio: 0.3,
        textCenter: false,
        speed: 1000
      });
      $(".circleChart#5").circleChart({
        size: 150,
        startAngle: 120,
        animate: true,
        color: "#ffa751",
        widthRatio: 0.3,
        textCenter: false,
        speed: 1000
      });
      $(".circleChart#6").circleChart({
        size: 150,
        startAngle: 50,
        animate: true,
        color: "#39c1ef",
        widthRatio: 0.3,
        textCenter: false,
        speed: 1000
      });
      $(".circleChart#7").circleChart({
        size: 150,
        startAngle: 70,
        animate: true,
        color: "#39c1ef",
        widthRatio: 0.3,
        textCenter: false,
        speed: 1000
      });

      demo1.start();

      demo2.start();

      demo3.start();

      demo4.start();

      demo5.start();

      demo6.start();
    </script>
    <script src="lib/circle-progress.js"></script>

    <script>
      //初始化环形进度条
      function create_circle(num, val_num) {
        if (num == 1 || num == 5 || num == 6) {
          $("#circle_step" + num)
            .circleProgress({
              value: val_num, //你需要展示的值，值从0.0到1.0，默认值为0
              size: 120, //环形图的大小，单位像素，默认值100
              startAngle: -3, //初始角度，默认值为-Math.PI
              reverse: false, //是否反向绘制圆弧和动画，默认值为false
              lineCap: "round", //圆弧的线头样式："butt"、"round"和"square"。默认值为"butt"
              thickness: 18, //进度条圆弧的宽度。默认它自动为size的1/14大小，你可以设置你需要的值。默认值为auto
              emptyFill: "rgba(0, 0, 0, .1)", //空圆弧的颜色。默认值为"rgba(0, 0, 0, .1)"
              fill: {
                //圆弧填充的配置。
                //				-{ color: "#ff1e41" }
                //				-{ color: 'rgba(255, 255, 255, .3)' }
                //				-{ gradient: ["red", "green", "blue"] }
                //				-{ gradient: [["red", .2], ["green", .3], ["blue", .8]] }
                //				-{ gradient: [ ... ], gradientAngle: Math.PI / 4 }
                //				-{ gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] }
                //				-{ image: "http://i.imgur.com/pT0i89v.png" }
                //				-{ image: imageInstance }
                //				-{ color: "lime", image: "http://i.imgur.com/pT0i89v.png" }
                //				默认值为{ gradient: ["#3aeabb", "#fdd250"] }
                gradient: ["#39c1ef", "#2ae6a8"]
              }
            })
            .on("circle-animation-progress", function(
              event,
              progress,
              stepValue
            ) {
              //当图像正在绘制时的监听事件
              $(this)
                .find("strong")
                .html(String((stepValue * 100).toFixed(0)));
            });
        } else if (num == 2 || num == 4) {
          $("#circle_step" + num)
            .circleProgress({
              value: val_num,
              size: 120,
              startAngle: -2.5,
              reverse: false,
              lineCap: "round",
              thickness: 18,
              fill: {
                gradient: ["#ffa751", "#ffe259"]
              }
            })
            .on("circle-animation-progress", function(
              event,
              progress,
              stepValue
            ) {
              $(this)
                .find("strong")
                .html(String((stepValue * 100).toFixed(0)) + "");
            });
        } else if (num == 3) {
          $("#circle_step" + num)
            .circleProgress({
              value: val_num,
              size: 120,
              startAngle: 0,
              reverse: false,
              lineCap: "round",
              thickness: 18,
              fill: {
                gradient: ["#ee5764", "#ffc371"]
              }
            })
            .on("circle-animation-progress", function(
              event,
              progress,
              stepValue
            ) {
              $(this)
                .find("strong")
                .html(String((stepValue * 100).toFixed(0)) + "");
            });
        }
      }

      create_circle(1, 0.35);
      create_circle(2, 0.42);
      create_circle(3, 0.94);
      create_circle(4, 0.58);
      create_circle(5, 0.24);
      create_circle(6, 0.12);

      //当鼠标点击环形进度条时
      //http://www.htmleaf.com/html5/html5-canvas/201505271918.html
      console.log((-Math.PI / 4) * 3);
    </script>

    <script>

       // 分数
       var number =88;
      $("#score").text(number)
      var demo = new CountUp("score", 0, number, 0, 0, options);
      demo.start();
      // 根据分数显示颜色和小球的位置

      // var score = $("#score").text();
      // console.log(score);
      // 判断分值
      if (number >= 80) {
        // alert(1)
        $(".semi-circle").css({
          background:
            'url("./images/riskOrientation/yellow_bg05.png") no-repeat',
            "background-position": "-1px -2px",
        });
        $(".bottom .left").css({
          // background: "#f96d18"
          background:
            'url("./images/riskOrientation/yellow_bg06.png") no-repeat'
        });
        $(".fa-flash").css({
          color: "#fc8432"
        });
        $('#ball').css({
          background:'#fc8432'
        })
      } else if (number >= 60) {
        $(".semi-circle").css({
          background: 'url("./images/riskOrientation/blue_bg01.png") no-repeat',
          "background-position": "-1px -2px",
          // "background-size": "220px 130px",

          
        });
        $(".bottom .left").css({
          background: 'url("./images/riskOrientation/blue_bg02.png") no-repeat'
        });
        $(".fa-flash:lt(4)").css({
          color: "#1080db"
        });
        $('#ball').css({
          background:'#1080db'
        })
      } else if (number >= 40) {
        $(".semi-circle").css({
          // background: "#32b1fe"
          background: 'url("./images/riskOrientation/green_bg03.png") no-repeat',
          "background-position": "-1px -2px",

        });
        $(".bottom .left").css({
          // background: "#32b1fe"
          background: 'url("./images/riskOrientation/green_bg04.png") no-repeat'
        });
        $(".fa-flash:lt(3)").css({
          color: "#38cf65"
        });
        $('#ball').css({
          background:'#38cf65'
        })
      } else if (number < 40) {
        $(".semi-circle").css({
          // background: "#3bff75"
          background: 'url("./images/riskOrientation/green_bg03.png") no-repeat',
          "background-position": "-1px -2px",
        });
        $(".bottom .left").css({
          // background: "#3bff75"
          background: 'url("./images/riskOrientation/green_bg04.png") no-repeat'
        });
        $(".fa-flash:lt(2)").css({
          color: "#38cf65"
        });
        $('#ball').css({
          background:'#38cf65'
        })
      }

     

      // 分数转度数
      // var de=;
      // 旋转度数

      var degs = 180/100*number;

      $("#ball").animate({}, function() {
        //第一个花括号里面是动画内容，可以为空，但不能省去中括号
        $("#ball").css("transform", `rotate(${degs}deg)`); //在回调函数里面改变css属性来实现transform中的动画变换
      });
    </script>
  </body>
</html>
